<template>
	<view class="mask" :class="!showDialog?'':'mask-show'" :style="{backgroundColor:'rgba(0,0,0,0.8)'}" @tap="onMask">
		<view class="scroll flex justify-between align-center" :style="{top:Height, left: 0, color:'#FFFFFF'}">
			<view class="icon-top" @click.native.stop="scrollX(0)">
				<image mode="widthFix" class="icon" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/user/bookshelf-img-left.png`"></image>
			</view>
			<scroll-view @scroll="scrollHeadImg" scroll-x="true" class="bookshelf-content" scroll-with-animation :scroll-left="scrollLeft">
				<block>
					<text class="blank" :style="{width:leftRightW}"></text> <!-- 左边空白块 -->
					<view v-for="(item,index) in imgs" id="item" :key="index" class="item" :style="{width:itemW+'px'}">
						<image @click="switchHead(index)" :style="{width:imgW+'rpx'}" class="headImg"
							:class="[ tobigactive==index?'toBig':'']" :src="item.path"></image>
					</view>
					<text class="blank" :style="{width:leftRightW}"></text> <!-- 右边空白块 -->
				</block>
			</scroll-view>
			<view class="icon-top" @click.native.stop="scrollX(1)">
				<image mode="widthFix" class="icon1" v-if="commonConfigs && commonConfigs.domainFrontFileLink" :src="`${commonConfigs.domainFrontFileLink}/files/images/user/bookshelf-img-right.png`"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'comSystemImg',
		props: {
			value: {
				type: Boolean,
				default: false
			},
			imgs: {
				type: Array
			}, //图片数组
			itemW: {
				type: Number,
				default: 60
			}, //每一项的宽度
			imgW: {
				type: Number,
				default: 55
			}, //左右两边空白的宽度
			defaultSelect: {
				type: Number,
				default: 2
			}, //默认选中下标
			Height: {
				type: String
			}, //默认选中下标
		},
		data() {
			return {
				showDialog: false,
				scrollLeft: 0,
				tobigactive: 2,
				oldScrollTop: 0,
				timeStamp: (new Date()).getTime(),
				setTimeout: '',
				leftRightW: 240, //左右两边空白的宽度
			}
		},
		mounted() {
			this.tobigactive = this.defaultSelect
			// this.getHeight()
			setTimeout(() => {
				this.scrollLeft = (this.itemW) * this.tobigactive
			}, 1000)
			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync();
			this.leftRightW = windowWidth / 1.5625
		},
		computed:{
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			}
		},
		watch: {
			value: {
				immediate: true,
				handler: async function(newVal, oldVal) {
					this.showDialog = newVal;
				}
			},
			defaultSelect: function(val) {
				console.log(val)
				this.tobigactive = val
				this.scrollLeft = (this.itemW) * this.tobigactive
			}
		},
		methods: {
			onMask(){
				this.$emit('input', !this.value)
			},
			
			getHeight() {
				uni.getSystemInfo({
					success: (res) => {
						this.Height = res.statusBarHeight + (this.itemW / 2)
					}
				});
			},
			scrollX(e) { //左右按钮
				if (((new Date()).getTime() - this.timeStamp) < 1000) { //左右按钮700毫秒只能点击一次,等待动画放完
					return
				} else {
					this.timeStamp = (new Date()).getTime()
				}
				this.scrollLeft = this.tobigactive * (this.itemW)
				if (e == 0 && this.scrollLeft > 0) { //左边按鈕
					this.scrollLeft -= this.itemW
				} else if (e == 1 && this.scrollLeft < (this.imgs.length * this.itemW + this.leftRightW)) { //右边按鈕
					this.scrollLeft += this.itemW
				}
			},
			scrollHeadImg(e) { //滑动选择
				let width = e.detail.scrollWidth //总宽度
				let x = e.detail.scrollLeft //距离左边
				let index = x / ((width - this.leftRightW) / this.imgs.length)
				this.tobigactive = Number(index.toFixed(0)) //当前选中的下标
				this.oldScrollTop = x //保存上次滑动位置
				if (this.setTimeout) {
					clearTimeout(this.setTimeout)
					this.setTimeout = setTimeout(() => {
						clearTimeout(this.setTimeout)
						// this.$emit('change', this.tobigactive)
					}, 300)
				} else {
					this.setTimeout = setTimeout(() => {
						clearTimeout(this.setTimeout)
						// this.$emit('change', this.tobigactive)
					}, 300)
				}

			},
			switchHead(index) {
				this.tobigactive = index
				this.scrollLeft = this.tobigactive * (this.itemW)
				this.$emit('change', this.tobigactive)
			},
			setVal(e) {
				this.tobigactive = e
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	.mask {
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 9999;
		// transition: background 0.3s ease-in-out;
		visibility: hidden;
	
		&.mask-show {
	
			visibility: visible;
		}
	}
	
	.scroll {
		width: 750rpx;
		height: 192rpx;
		background: rgba(0,0,0,0.8);
		position: fixed;
		top: 194rpx;
		border-top: 1px solid #333333;
		z-index: 99999;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-top: 4rpx solid #63FFF7;
		border-bottom: 4rpx solid #63FFF7;
		.icon-top {
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;

			.icon {
				width: 20px;
				height: 20px;
				margin-left: 43rpx;
				background-image: none;
				// transform: rotate(180deg);
				// -ms-transform: rotate(180deg);
				// -moz-transform: rotate(180deg);
				// -webkit-transform: rotate(180deg);
				// -o-transform: rotate(180deg);
			}

			.icon1 {
				width: 20px;
				height: 20px;
				margin-right: 43rpx;
				background-image: none;
			}
		}

		scroll-view {
			color: #FFFFFF;
			display: flex;
			flex-direction: row;
			white-space: nowrap; // 滚动必须加的属性
			width: 600rpx;
			height: 100%;
		}

		.blank {
			display: inline-block;
			width: 240rpx;
			height: 100%;
		}

		.item {
			width: 120px;
			display: inline-block;
			vertical-align: top;
			text-align: center;
			margin-top: 26rpx;

			.headImg {
				width: 55rpx;
				height: 55rpx;
				border-radius: 50%;
				margin-top: 40rpx;
				// transition: 0.5s;
				// -webkit-transition: 0.5s;
			}
		}
	}

	.toBig {
		width: 80rpx !important;
		height: 80rpx !important;
		border: 2px solid #FBDB08;
		margin-top: 25rpx !important;
	}
</style>
